<%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	function updateCartAjax(obj){
		let item = obj;
		let productId = item.className;
		let priceO = productId+"Price";
		let totalO = productId;
		let p = document.getElementById(priceO);

		let t = document.getElementById(totalO);


		let a = $(obj).val();
		if(isNaN(a)===false && a>=0) {
			console.log("456");
			let price = p.textContent.trim().substring(1);

			let total = a*price;
			total = total.toFixed(2);
			total = "$"+total;
			t.textContent=total;

			$.ajax({
				type: 'post',
				url: 'updateCartAjax',
				data: $('form').serialize(),
				success: function (data) {
					console.log(data);
					$('#sub-total').text("$ "+data);
				}

			});

			console.log("123");
		}
		else {
			alert("Please Enter a number more than 0");

		}

	}
</script>

<div id="BackLink">
	<a href="main">Return to Main Menu</a>
</div>

<div id="Catalog">

	<div id="Cart">

		<h2>Shopping Cart</h2>
		<form action="updateCartQuantities" method="post">
			<table>
				<tr>
					<th><b>Item ID</b></th>
					<th><b>Product ID</b></th>
					<th><b>Description</b></th>
					<th><b>In Stock?</b></th>
					<th><b>Quantity</b></th>
					<th><b>List Price</b></th>
					<th><b>Total Cost</b></th>
					<th>&nbsp;</th>
				</tr>

				<c:if test="${sessionScope.cart.numberOfItems == 0}">
					<tr>
						<td colspan="8"><b>Your cart is empty.</b></td>
					</tr>
				</c:if>

				<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
					<tr>
						<td>
							<a href="item?itemId=${cartItem.item.itemId}" >${cartItem.item.itemId}</a>
						</td>
						<td>${cartItem.item.product.productId}</td>
						<td>${cartItem.item.attribute1} ${cartItem.item.attribute2}
								${cartItem.item.attribute3} ${cartItem.item.attribute4}
								${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
						<td>${cartItem.inStock}</td>
						<td>
							<input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}" onfocusout="updateCartAjax(this)" class="${cartItem.item.itemId}"/>
						</td>
						<td id = "${cartItem.item.itemId}Price">
							<fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" />
						</td>
						<td id = "${cartItem.item.itemId}">
							<fmt:formatNumber value="${cartItem.total} " pattern="$#,##0.00" />
						</td>
						<td>
							<a href="removeItemFromCart?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
						</td>
					</tr>
				</c:forEach>


				<tr>
					<td colspan="7" >
						Sub Total: <span id="sub-total"><fmt:formatNumber value="${sessionScope.cart.subTotal} "  pattern="$#,##0.00" /></span>
						<input type="submit"  name="updateCart" value="Update Cart"/>
					</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</form>




		<c:if test="${sessionScope.cart.numberOfItems > 0}">
			<a href="newOrderForm?itemId=${cartItem.item.itemId}" class="Button">Proceed to Checkout</a>
		</c:if>
	</div>

	<div id="Separator">&nbsp;</div>

</div>

<%@ include file="../common/IncludeBottom.jsp"%>